<template>
  <view class="feedback-container">
    <view class="feedback-card">
      <view class="label">头像</view>
      <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <image v-if="imgUrl" :src="imgUrl" class="avatar" />
        <view v-else class="avatar-placeholder">
          <image src="/static/image/upload_img.png" class="avatar-icon" />
        </view>
      </button>
      <view class="label">昵称</view>
      <input type="nickname" class="weui-input" v-model="contact" placeholder="请输入昵称" @input="onNicknameInput" />
      <view class="label">手机号</view>
      <view class="phone-input-wrapper">
        <input type="number" class="weui-input phone-input" v-model="phone" placeholder="请输入手机号" @input="onPhoneInput" />
        <button class="auth-phone-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
		 一键授权
        </button>
      </view>
    </view>
    <ZButton type="secondary" class="submit-btn" @click="submit">保存</ZButton>
  </view>
</template>

<script>
import ZButton from "../../components/ZButton.vue";

export default {
  components: {ZButton},
  data() {
    return {
      content: '',
      imgUrl: '',
      contact: '',
      phone: ''
    }
  },
  onLoad() {
    this.imgUrl = this.userInfo.avatar_url
    this.contact = this.userInfo.nickname
    this.phone = this.userInfo.phone || ''
  },
  methods: {
    onChooseAvatar(e) {
      uni.uploadFile({
        url: this.$api.uploadImage,
        filePath: e.detail.avatarUrl,
        name: 'file',
        success: (uploadFileRes) => {
          try {
            let data = JSON.parse(uploadFileRes.data);
            const url = data.data.url;
            this.imgUrl = url;
            uni.showToast({
              title: '上传成功',
              icon: 'success'
            });
          } catch (error) {
            console.log('上传失败', error);
          }
        },
        fail: (err) => {
          console.log('上传失败', err);
          uni.showToast({
            title: '上传失败',
            icon: 'none'
          });
          console.log('上传失败', err);
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },
    onNicknameInput(e) {
      console.log('昵称输入:', e);
      this.contact = e.detail.value;
    },
    onPhoneInput(e) {
      console.log('手机号输入:', e);
      this.phone = e.detail.value;
    },
    onGetPhoneNumber(e) {
      console.log('微信授权手机号:', e);
      if (e.detail.code) {
        if (e.detail.errMsg !== 'getPhoneNumber:ok') {
          uni.showToast({
            title: e.detail.errMsg,
            icon: 'none'
          });
          return;
        }
        // 调用后端接口解密手机号
        uni.showLoading({
          title: '获取中...',
          mask: true
        });
        this.$api.getPhoneNumber({
          code: e.detail.code
        }).then(res => {
          this.phone = res;
        })
      } else {
        uni.showToast({
          title: '用户拒绝授权',
          icon: 'none'
        });
      }
    },
    submit() {
      if (!this.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '是否登录？',
          // 文本颜色
          color: '#333333',
          // 取消按钮的文字颜色
          cancelColor: '#D43030',
          // 确认按钮的文字颜色
          confirmColor: '#333333',
          success: () => {
            uni.navigateTo({
              url: '/pages/login/login'
            })
          }
        })
        return
      }
      // if (!this.content) {
      //   uni.showToast({ title: '请输入反馈内容', icon: 'none' });
      //   return;
      // }
      // if (this.contact && !/^1[3456789]\d{9}$/.test(this.contact)) {
      //   uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
      //   return;
      // }
      if (!this.contact) {
        uni.showToast({ title: '请输入昵称', icon: 'none' });
        return;
      }
      if (this.phone && !/^1[3456789]\d{9}$/.test(this.phone)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
        return;
      }
      uni.showLoading({
        title: '提交中...',
        mask: true
      })
      this.$api.updateUser(this.userInfo.id, {
          nickname: this.contact,
          avatar_url: this.imgUrl,
          phone: this.phone
      }).then(res => {
        uni.hideLoading() 
        uni.showToast({ title: '提交成功', icon: 'success' });
        setTimeout(() => {
          // 判断是否存在上级页面，有返回上一页，没有返回首页
          const pages = getCurrentPages()
          if (pages.length > 1) {
            uni.navigateBack()
          } else {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }
        },500)
      })
    }
  }
}
</script>

<style lang="scss">
.feedback-container {
  min-height: 100vh;
  padding: 32rpx;
  background-color: #f5f5f5;
}
.feedback-card {
  width: 100%;
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin-bottom: 40rpx;
  .label {
    font-size: 28rpx;
    color: #000;
    font-weight: 400;
    margin-bottom: 24rpx;
    margin-top: 12rpx;
  }
  .input-area {
    width: 100%;
    box-sizing: border-box;
    min-height: 120rpx;
    background: #F7F7F7;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
    padding: 18rpx 20rpx;
    margin-bottom: 18rpx;
    border: none;
    resize: none;
  }
  .avatar-wrapper {
    width: 200rpx;
    height: 200rpx;
    background: #F7F7F7;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18rpx;
    border: none;
    padding: 0;
    &::after {
      border: none !important;
    }
    .avatar-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .avatar-icon {
        width: 60rpx;
        height: 60rpx;
        opacity: 0.5;
      }
    }
    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
      object-fit: cover;
    }
  }
  .weui-input {
    width: 100%;
    height: 80rpx;
    background: #F7F7F7;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
    padding: 0 20rpx;
    margin-bottom: 12rpx;
    border: none;
    box-sizing: border-box;
  }
  .phone-input-wrapper {
    display: flex;
    align-items: center;
    gap: 20rpx;
    margin-bottom: 12rpx;
    .phone-input {
      flex: 1;
      margin-bottom: 0;
    }
    .auth-phone-btn {
      height: 80rpx;
      background: transparent;
      color: #409EFF;
      font-size: 24rpx;
      border: none;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      &::after {
        border: none !important;
      }
    }
  }
  .desc {
    font-size: 28rpx;
    color: #666;
    line-height: 36rpx;
    margin-bottom: 0;
    margin-top: 12rpx;
  }
}
.submit-btn {
  margin: 60rpx auto 0 auto;
}
</style>
